/**
 * Por Joshua
 * Panel que muestra un espacio para poner un comentario. Si el usuario lo presiona, lo intercambia por un textarea para redactarlo
 * @class Extmx.form.FormComentario
 *
 * @extends Ext.Panel
 * @autor Ing. Josue Hernandez Gomez<br>
 *        joshua@extjs.mx<br>
 *        http://www.joshua.com.mx
 * @fecha 9/12/12 10:26 AM. Mexico DF
 */

Ext.ns("Extmx.form.FormComentario");

Extmx.form.FormComentario = Ext.extend(Ext.Panel,{
    
    border: false,

    layout:"card",
    activeItem: 0,
    emptyText:'Comentar...',
    autoHeight: true,
    tulTip:undefined,

    /**
     * Cuando el usuario haga blur, el componente volvera a su estado natural, o mitiendo el comentario realizado
     * @joshua
     * @fecha 12 de septiembre de 2012
     */
    releaseOnBlur: true,
    
    initComponent:function(){        
        
        var listeners= {
            listeners:{
                scope: this,
                menuclick : this.onClick
            }
        }
        
        Ext.apply(this,{

            defaults:{
                border: false,
                layout:'fit'
            },
            items: [{
              html:'<div class="tocomment" style="background:#FFF; padding:5px; border: 1px solid #dadada;color:#ABABAB; font-size: 9pt; ">'+this.emptyText+'</div>',
              id:"html"+this.id,
              listeners:{
                  scope: this,
                  render: function (p){

                      p.body.on({
                          scope: this,
                          click: this.focus
                      });
                  }
              }
            },{
                id:"txtarea"+this.id,
                items:{
                    id:"textarea"+this.id,
                    tooltip: this.tulTip,
                    plugins: new tooltipfield(),
                    xtype:"textarea",
                    grow : true,
                    //style:"margin: 5px 15px 20px 45px; padding: 5px;",
                    emptyText:"Comentar...",
                    //width:480,
                    enableKeyEvents: true,
                    shiftPresionado: false,
                    listeners: {
                        scope: this,
                        blur: this.blur,
                        render: function (b){
                            if(this.releaseOnBlur)
                                b.keymap= new Ext.KeyMap(b.el, [{
                                    key: [13],
                                    //ctrl:true,
                                    //shift:true,
                                    scope: this,
                                    fn: function(a,s,d){
                                        if(!b.shiftPresionado)
                                            this.comentar(b);
                                    }
                                }])
                        },
                        keydown : function   ( b, e ) {
                            if(e.getKey()==e.SHIFT)
                                b.shiftPresionado= true;
                        },
                        keyup : function( b, e) {
                            if(e.getKey()==e.SHIFT)
                                b.shiftPresionado= false;
                        }
                    }
            }
        }]
        });
        Extmx.form.FormComentario.superclass.initComponent.apply(this,arguments);
        
        this.addEvents("comentar");
    },
    
    focus: function (){
        if(!this.txtArea )
            this.txtArea= Ext.getCmp("txtarea"+this.id);

        this.layout.setActiveItem(this.txtArea.id);
        Ext.getCmp("textarea"+this.id).focus();
    },
    
    comentar: function (cmp){
        this.blur();
        this.fireEvent("comentar", this, go.textToHtml( cmp.getValue() ));
        cmp.setValue("");
        cmp.reset();
        cmp.plugins.esconder();
    },
    
    blur: function (){
        if(this.releaseOnBlur)
            this.layout.setActiveItem("html"+this.id);
    }
});

Ext.reg("mxformcomentario",Extmx.form.FormComentario );


